<template>
  <div class="enhanced-feedback">
    <el-card shadow="hover" class="feedback-card">
      <template #header>
        <div class="card-header">
          <h2><el-icon><ChatLineRound /></el-icon> 问题反馈</h2>
          <p class="sub-title">您的建议将帮助我们做得更好</p>
        </div>
      </template>

      <el-steps :active="step" finish-status="success" simple class="form-steps">
        <el-step title="选择类型"></el-step>
        <el-step title="填写内容"></el-step>
        <el-step title="完成提交"></el-step>
      </el-steps>

      <div v-if="step === 1" class="step-content">
        <el-radio-group v-model="form.type" class="type-selector">
          <el-radio-button
              v-for="item in feedbackTypes"
              :key="item.value"
              :label="item.value"
          >
            <div class="type-item">
              <component :is="item.icon" class="type-icon" />
              <span>{{ item.label }}</span>
            </div>
          </el-radio-button>
        </el-radio-group>

        <div class="type-examples" v-if="form.type">
          <h4>常见{{ feedbackTypes.find(t => t.value === form.type)?.label }}示例：</h4>
          <el-tag
              v-for="(example, idx) in examples[form.type]"
              :key="idx"
              type="info"
              effect="plain"
              class="example-tag"
              @click="insertExample(example)"
          >
            {{ example }}
          </el-tag>
        </div>
      </div>

      <div v-if="step === 2" class="step-content">
        <el-form ref="formRef" :model="form" label-width="auto">
          <el-form-item
              label="问题描述"
              prop="content"
              :rules="[
              { required: true, message: '请详细描述问题', trigger: 'blur' },
              { min: 20, message: '至少输入20个字符', trigger: 'blur' }
            ]"
          >
            <el-input
                v-model="form.content"
                type="textarea"
                :rows="6"
                placeholder="请详细描述您遇到的问题或建议..."
                show-word-limit
                maxlength="500"
                resize="none"
            />
          </el-form-item>

          <el-form-item label="添加截图">
            <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="3"
                :on-change="handleUpload"
                :file-list="fileList"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="联系方式">
            <el-input
                v-model="form.contact"
                placeholder="请输入邮箱/手机号（方便我们回复您）"
                clearable
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="step === 3" class="result-step">
        <el-result
            icon="success"
            title="提交成功!"
            sub-title="感谢您的反馈，我们会在3个工作日内处理"
        >
          <template #extra>
            <el-button type="primary" @click="resetForm">再提一个建议</el-button>
            <el-button @click="goToHome">返回首页</el-button>
          </template>
        </el-result>
      </div>

      <template #footer>
        <div class="form-footer">
          <el-button
              v-if="step > 1 && step < 3"
              @click="step--"
              :icon="ArrowLeft"
          >
            上一步
          </el-button>
          <el-button
              v-if="step < 2"
              type="primary"
              @click="step++"
              :disabled="!form.type"
              :icon="ArrowRight"
          >
            下一步
          </el-button>
          <el-button
              v-if="step === 2"
              type="primary"
              @click="submitForm"
              :loading="submitting"
          >
            提交反馈
          </el-button>
        </div>
      </template>
    </el-card>

    <div class="feedback-tips">
      <el-alert title="反馈小贴士" type="info" :closable="false">
        <ul>
          <li>描述问题时请包含：操作步骤、预期结果、实际结果</li>
          <li>提供截图可以帮助我们更快定位问题</li>
          <li>紧急问题请直接联系客服</li>
        </ul>
      </el-alert>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  ChatLineRound, User, Plus, ArrowLeft, ArrowRight,
  Warning, Promotion, QuestionFilled, Bell
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const step = ref(1)
const submitting = ref(false)
const formRef = ref()

const feedbackTypes = [
  { value: 'bug', label: '功能异常', icon: Warning },
  { value: 'suggestion', label: '产品建议', icon: Promotion },
  { value: 'question', label: '使用咨询', icon: QuestionFilled },
  { value: 'other', label: '其他反馈', icon: Bell }
]

const examples = {
  bug: [
    '提交问卷时页面卡死',
    '导出的Excel数据缺失',
    '移动端显示错位问题'
  ],
  suggestion: [
    '希望增加多选题批量编辑功能',
    '建议优化数据分析图表类型',
    '模板中心需要更多行业分类'
  ],
  question: [
    '如何设置问卷截止时间？',
    '协作编辑的权限如何分配？',
    '数据看板能自定义指标吗？'
  ],
  other: [
    '希望增加培训课程',
    '关于企业版的价格咨询',
    '合作意向沟通'
  ]
}

const form = reactive({
  type: '',
  content: '',
  contact: '',
  screenshots: []
})

const fileList = ref([])

const handleUpload = (file) => {
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.warning('图片大小不能超过2MB')
    return false
  }
  form.screenshots.push(file.raw)
}

const insertExample = (text) => {
  form.content = form.content ? `${form.content}\n${text}` : text
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500))

    step.value = 3
    ElMessage.success('反馈提交成功！')
  } catch (e) {
    console.error('验证失败:', e)
  } finally {
    submitting.value = false
  }
}

const resetForm = () => {
  step.value = 1
  formRef.value?.resetFields()
  form.type = ''
  form.screenshots = []
  fileList.value = []
}

const goToHome = () => {
  router.push('/') // 修改为使用路由跳转到首页
}
</script>

<style scoped>
.enhanced-feedback {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.feedback-card {
  margin-bottom: 20px;
}

.card-header {
  text-align: center;
}
.card-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sub-title {
  margin: 5px 0 0;
  color: #888;
  font-size: 14px;
}

.form-steps {
  margin: 20px auto;
  max-width: 500px;
}

.step-content {
  padding: 0 20px;
}

.type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}
.type-selector :deep(.el-radio-button__inner) {
  padding: 20px 15px;
  border-radius: 8px !important;
}
.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.type-icon {
  font-size: 24px;
}

.type-examples {
  margin-top: 30px;
  border-top: 1px dashed #eee;
  padding-top: 20px;
}
.type-examples h4 {
  margin-bottom: 10px;
  color: #666;
}
.example-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.example-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.result-step {
  padding: 40px 0;
}

.form-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.feedback-tips ul {
  margin: 10px 0 0 20px;
  color: #666;
  line-height: 1.8;
}
</style>